<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>12306 模仿界面 我的</title>
    <link rel="stylesheet" href="iconfont/iconfont.css">
    <link rel="stylesheet" href="css/myself.css">
</head>
<body>
<header class="header">
    <img src="image/设置.jpg">
    <img src="image/消息.jpg">
</header>
<div class="wrapper">
    <div class="myselftop">
        <div class="myselftopleft">
            <div>
                <i class="i ic:outline-person-outline"></i>
            </div>
        </div>
        <div class="myselftopright">
            <div class="myselftoprighttop">
                <h2>康赟</h2>
            </div>
            <div class="myselftoprightbottom">
                <div class="myselftoprightbottomleft">
                    <p>手机核验成功</p>
                    <div class="myselftoprightbottomicon">
                        &#8730;
                    </div>
                </div>
                <div class="myselftoprightbottomright">
                    <p>已实名认证</p>
                    <div class="myselftoprightbottomicon">
                        &#8730;
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="myselflist0">
        <div class="myselflist01">
           <img src="image/myselflist0%20(2).jpg">
            <p>乘车人</p>
        </div>
        <p>|</p>
        <div class="myselflist01">
            <img src="image/myselflist0%20(3).jpg">
            <p>我的订单</p>
        </div>
        <p>|</p>
        <div class="myselflist01">
            <img src="image/myselflist0%20(1).jpg">
            <p>优惠券</p>
        </div>
    </div>
    <div class="myselflist0img">
        <img src="image/学生资质.jpg">
    </div>
    <div class="myselflist1">
        <h3>出行向导</h3>
        <div class="myselflist1items">
            <div class="myselflist1item">
                <img src="image/myselflist1%20(6).jpg">
                <p>车站大屏</p>
            </div>
            <div class="myselflist1item">
                <img src="image/myselflist1%20(1).jpg">
                <p>时刻表</p>
            </div>
            <div class="myselflist1item">
                <img src="image/myselflist1%20(2).jpg">
                <p>起售时间</p>
            </div>
            <div class="myselflist1item">
                <img src="image/myselflist1%20(7).jpg">
                <p>正晚点查询</p>
            </div>
            <div class="myselflist1item">
                <img src="image/myselflist1%20(3).jpg">
                <p>票价查询</p>
            </div>
            <div class="myselflist1item">
                <img src="image/myselflist1%20(8).jpg">
                <p>换乘时间</p>
            </div>
            <div class="myselflist1item">
                <img src="image/myselflist1%20(4).jpg">
                <p>代售点查询</p>
            </div>
            <div class="myselflist1item">
                <img src="image/myselflist1%20(5).jpg">
                <p>更多</p>
            </div>
        </div>
    </div>
    <div class="myselflist1">
        <h3>常用功能</h3>
        <div class="myselflist1items">
            <div class="myselflist1item">
                <img src="image/myselflist2%20(2).jpg">
                <p>人证核验</p>
            </div>
            <div class="myselflist1item">
                <img src="image/myselflist2%20(3).jpg">
                <p>指纹登录</p>
            </div>
            <div class="myselflist1item">
                <img src="image/myselflist2%20(4).jpg">
                <p>修改密码</p>
            </div>
            <div class="myselflist1item">
                <img src="image/myselflist2%20(7).jpg">
                <p>修改手机号</p>
            </div>
            <div class="myselflist1item">
                <img src="image/myselflist2%20(8).jpg">
                <p>通知设置</p>
            </div>
            <div class="myselflist1item">
                <img src="image/myselflist2%20(5).jpg">
                <p>敬老版</p>
            </div>
            <div class="myselflist1item">
                <img src="image/myselflist2%20(1).jpg">
                <p>快捷退票</p>
            </div>
            <div class="myselflist1item">
                <img src="image/myselflist2%20(6).jpg">
                <p>学生资质核验</p>
            </div>
        </div>
    </div>
    <div class="myselflist1">
        <h3>温馨服务</h3>
        <div class="myselflist1items">
            <div class="myselflist1item">
                <img src="image/myselflist3%20(2).jpg">
                <p>临时身份证明</p>
            </div>
            <div class="myselflist1item">
                <img src="image/myselflist3%20(3).jpg">
                <p>遗失物品</p>
            </div>
            <div class="myselflist1item">
                <img src="image/myselflist3%20(4).jpg">
                <p>建议</p>
            </div>
            <div class="myselflist1item">
                <img src="image/myselflist3%20(7).jpg">
                <p>投诉</p>
            </div>
            <div class="myselflist1item">
                <img src="image/myselflist3%20(5).jpg">
                <p>重点旅客</p>
            </div>
            <div class="myselflist1item">
                <img src="image/myselflist3%20(8).jpg">
                <p>客服电话</p>
            </div>
            <div class="myselflist1item">
                <img src="image/myselflist3%20(6).jpg">
                <p>希望工程</p>
            </div>
            <div class="myselflist1item">
                <img src="image/myselflist3%20(1).jpg">
                <p>外国商务人...</p>
            </div>
        </div>
    </div>
    <div class="question">
        <div class="questiontop">
            <h3>信息服务</h3>
        </div>
        <div class="questionlist">
            <p>公告</p>
            <i class="i material-symbols:arrow-forward-ios-rounded"></i>
        </div>
        <div class="questionlist">
            <p>常见问题</p>
            <i class="i material-symbols:arrow-forward-ios-rounded"></i>
        </div>
        <div class="questionlist">
            <p>使用须知</p>
            <i class="i material-symbols:arrow-forward-ios-rounded"></i>
        </div>
        <div class="questionlist">
            <p>服务规章</p>
            <i class="i material-symbols:arrow-forward-ios-rounded"></i>
        </div>
        <div class="questionlist">
            <p>铁路保险</p>
            <i class="i material-symbols:arrow-forward-ios-rounded"></i>
        </div>
        <div class="questionlist">
            <p>关于</p>
            <i class="i material-symbols:arrow-forward-ios-rounded"></i>
        </div>

    </div>
</div>
<!--底部菜单部分-->
<ul class="footer">
    <li onclick="location.href='home_page.html'">
        <i class="i ion:md-train"></i>
        <p>首页</p>
    </li>
    <li onclick="location.href='mobility_service.html'">
        <i class="i material-symbols:checked-bag-outline"></i>
        <p>出行服务</p>
    </li>
    <li onclick="location.href='order.html'">
        <i class="i solar:document-outline"></i>
        <p>订单</p>
    </li>
    <li onclick="location.href='vip.html'">
        <i class="i mingcute:vip-1-line"></i>
        <p>铁路会员</p>
    </li>
    <li onclick="location.href='myself.html'">
        <i class="i ic:outline-person-outline"  style="color: #3c97f9"></i>
        <p  style="color: #3c97f9">我的</p>
    </li>
</ul>
</body>
</html>